<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="toplineBox mb-10">
          <div class="toplineBox-left">
            <div class="hearder-search mb-10">
              <el-input v-model="editForm.realname" placeholder="填写姓名" size="small" class="w-200 mr-10"></el-input>
              <el-select v-model="editForm.role" placeholder="请选择角色" size="small" class="mr-10">
                <el-option :label="item.name" :value="item.id" v-for="(item, index) in role" :key="index"></el-option>
              </el-select>
              <el-button type="primary" size="small" @click="searchFn"><i class="el-icon-search"></i>搜索</el-button>
              <el-button size="small" @click="searchFn"><i class="el-icon-refresh-left"></i>重置</el-button>
            </div>
          </div>
          <p class="numberline toplineBox-right">总{{ page.total }}条</p>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              border
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c">
            <el-table-column
                align="center"
                prop="realname"
                label="姓名"
                width="100">
            </el-table-column>
            <el-table-column
                label="头像"
                width="80"
                align="center">
              <template slot-scope="scope">
                <viewerModle type="1" :imgSrc="scope.row.pic"></viewerModle>
              </template>
            </el-table-column>
            <el-table-column
                prop="class_name"
                label="班级"
                align="center">
              <template slot-scope="scope">
                <span v-if="!scope.row.classes" class="notborrow">未定义</span>
                <span v-else>{{ scope.row.classes.class_name }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="role"
                label="角色"
                align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.role">{{ scope.row.role.name }}</span>
                <span v-else class="notborrow">未定义</span>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="440"
                align="center">
              <template slot-scope="scope">
                <el-button size="small" @click="getAuthorizedPerson(1,scope.$index)">添加授出人</el-button>
                <el-button size="small" @click="getAuthorizedPerson(2,scope.$index)">添加授进人</el-button>
                <el-button size="small" @click="checkPerson(1,scope.$index)">查看授出人</el-button>
                <el-button size="small" @click="checkPerson(2,scope.$index)">查看授进人</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pageSize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <NewAuthorizedPerson :visible.sync="authorizedvisible" @getUser="InitFn"
                         :userOption="userOption"></NewAuthorizedPerson>
    <checkPerson :visible.sync="checkvisible" @getUser="InitFn"
                 :userOption="userOption"></checkPerson>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import NewAuthorizedPerson from '@/components/dialog/NewAuthorizedPerson'
import checkPerson from '@/components/dialog/checkPerson'

export default {
  components: {
    NewAuthorizedPerson,
    checkPerson
  },
  data () {
    return {
      // 设置table样式
      tableStyle: tableoption,
      tearchVisible: false,
      dialogVisible: false,
      editForm: {
        realname: '',
        role: '',
        p: ''
      }, // 编辑界面数据
      arryList: [], // 数据列表
      role: [{name: '全部', id: ''}],
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      handleSelection: [],
      // new
      eidtOption: null,
      checkType: null,
      tearchOption: '',
      authorizedvisible: false,
      userOption: {}, // 用户id
      checkvisible: false
    }
  },
  created () {
    this.InitFn()
    this.roleFn()
  },
  methods: {
    // 初始化
    InitFn () {
      this.editForm.p = this.page.pageindex
      this.$fetch(this.api.admin_user_index, this.editForm).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list.data
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    changeList () {
      this.InitFn()
    },
    tearcherClass (option) {
      this.tearchOption = option
      this.tearchVisible = true
    },
    roleFn () {
      this.$post(this.api.role.select, {}).then((response) => {
        if (response.code === 0) {
          for (let i in response.list) {
            this.role.push(response.list[i])
          }
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange (val) {
      this.page.pageindex = val
      this.InitFn()
    },
    searchFn () {
      this.page.pageindex = 1
      this.InitFn()
    },
    // 刷新页面
    refreshFn () {
      this.page.pageindex = 1
      this.editForm.realname = ''
      this.editForm.role = ''
      this.InitFn()
    },
    getevents () {
      this.page.pageindex = 1
      this.InitFn()
    },
    gotoHistory () {
      console.log('返回到离职教职工列表')
      this.$router.push('/tearchHistory')
    },
    getAuthorizedPerson (typeOption, index) {
      let dataOption = {}
      dataOption.id = this.arryList[index].id
      dataOption.realname = this.arryList[index].realname
      dataOption.type = typeOption
      this.userOption = dataOption
      this.authorizedvisible = true
    },
    checkPerson (typeOption, index) {
      let dataOption = {}
      dataOption.id = this.arryList[index].id
      dataOption.realname = this.arryList[index].realname
      dataOption.type = typeOption
      this.userOption = dataOption
      this.checkvisible = true
    }
  },
  mounted () {
  },
  beforeRouteEnter (to, from, next) {
    // 利用路由元信息中的 meta 字段设置变量，方便在各个位置获取。这就是为什么在 meta 中定义 isNeedRefresh。
    // 当从详情页返回时，将 isNeedRefresh 设为 false，表示不刷新数据
    if (to.meta.isNeedRefresh) {
      this.InitFn() // 详情页面需要刷新数据
    }
    next()
  },
  beforeRouteLeave (to, from, next) {
    // isNeedRefresh 进入页面判断是否需要刷新
    if (to.meta.isNeedRefresh) {
      from.meta.keepAlive = true
    } else {
      from.meta.keepAlive = false
    }
    next()
  }
}
</script>
